<template>
  <div class="operation">
    <el-card shadow="never">
      <div slot="header">
        <el-form :inline="true" size="small">
          <el-form-item label="操作类型" :label-width="labelWidth">
            <el-select v-model="form.operationType" @change="getDataList" clearable>
              <el-option label="添加" value="1">添加</el-option>
              <el-option label="修改" value="2">修改</el-option>
              <el-option label="删除" value="3">删除</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作人" :label-width="labelWidth">
            <el-select v-model="form.operationName" @change="getDataList"  clearable>
              <el-option :label="item.operationName" :value="item.operationName" v-for="item in userNameList"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" :label-width="labelWidth">
            <el-input v-model="form.operationTitle" @change="getDataList"></el-input>
          </el-form-item>
          <el-form-item label="时间" :label-width="labelWidth">
            <el-date-picker
                @change="getDataList"
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList" type="primary">查询</el-button>
          </el-form-item>
          <el-form-item label="展示形式">
            <el-radio-group v-model="type" size="small">
              <el-radio value="time" label="time">时间轴</el-radio>
              <el-radio value="table" label="table">表格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div style="height: 45px" v-if="type==='time'">
        <span style="float: left;margin-left: 2.5rem">
          <el-switch v-model="reverse" :active-value="false" :inactive-value="true" active-text="升序" inactive-text="降序"></el-switch>
        </span>
        <span style="float: right">共 <b v-text="total"></b> 条数据 <el-button  circle icon="el-icon-refresh" @click="getDataList"></el-button></span>
      </div>
      <el-row class="main">
        <el-timeline v-infinite-scroll="load" :infinite-scroll-disabled="disabled" :reverse="reverse" v-if="type==='time'">
          <el-timeline-item :timestamp="item.operationDateTime|formatDate" placement="top" v-for="item in recordList" :key="item.id">
            <el-card class="parent">
              <div class="child">
                <el-tag v-if="item.operationType===1" type="success">添加</el-tag>
                <el-tag v-if="item.operationType===2" type="warning">修改</el-tag>
                <el-tag v-if="item.operationType===3" type="danger">删除</el-tag>
              </div>

              <h4 v-text="item.operationTitle"></h4>
              <p v-text="item.operationSummary"></p>
              <p><i class="el-icon-user">  操作人：</i><span v-text="item.operationName"></span> <el-divider direction="vertical"></el-divider>结果：<el-tag :type="item.operationResult?'success':'danger'" v-text="item.operationResult?'成功':'失败'"></el-tag></p>
            </el-card>
          </el-timeline-item>
          <p v-if="loading" class="text-center" id="loading"><span>加载中...</span></p>
          <p v-if="noMore" class="text-center">暂无数据</p>
        </el-timeline>
        <div  v-else >
          <el-table :data="recordList" height="52.5vh" stripe show-header border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column label="操作时间"  min-width="80">
              <template slot-scope="scope">
                {{scope.row.operationDateTime|formatDate}}
              </template>
            </el-table-column>
            <el-table-column label="操作标题" prop="operationTitle">
            </el-table-column>
            <el-table-column label="操作类型"  min-width="30">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.operationType===1" type="success">添加</el-tag>
                <el-tag v-if="scope.row.operationType===2" type="warning">修改</el-tag>
                <el-tag v-if="scope.row.operationType===3" type="danger">删除</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作摘要" prop="operationSummary" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作人" prop="operationName">
            </el-table-column>
            <el-table-column label="操作结果"  min-width="30">
              <template slot-scope="scope">
                <el-tag :type="scope.row.operationResult?'success':'danger'" v-text="scope.row.operationResult?'成功':'失败'"></el-tag>
              </template>
            </el-table-column>
<!--            <el-table-column label="操作" min-width="80" fixed="right">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->
<!--                    size="mini"-->
<!--                    @click="handleEdit(scope.$index, scope.row)">编辑-->
<!--                </el-button>-->
<!--                <el-button-->
<!--                    size="mini"-->
<!--                    type="danger"-->
<!--                    @click="handleDelete(scope.$index, scope.row)">删除-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
          <div class="block">
            <el-pagination
                hide-on-single-page
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[12, 24, 36, 48,total]"
                :page-size=size
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
          </div>
        </div>

      </el-row>
    </el-card>
  </div>
</template>

<script>
import {Loading} from 'element-ui';

export default {
  name: "SystemOperationRecord",
  data() {
    return {
      reverse:false,
      labelWidth: "70px",
      form: {},
      recordList: [],
      currentPage: 1,
      total: 0,
      size: 10,
      loading: false,
      userNameList:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      date:[],
      loadingTarget:null,
      type:"time"
    }
  },
  created() {
    this.getUserList()
    this.getDataList()
  },
  computed: {
    noMore() {
      return this.recordList.length >= this.total
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  methods: {
    handleSizeChange(val){
      this.size=val
      this.getDataList()
    },
    handleCurrentChange(val){
      this.currentPage=val
      this.getDataList()
    },
    load() {
      this.size += 10
      this.getDataList()
    },
    startLoading(){
      let options={

        target:document.getElementById("loading"),
        text:"加载中..."
      }
      this.loadingTarget=Loading.service(options)
    },
    endLoading(){
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        this.loadingTarget.close();
      });
    },
    getDataList() {
      this.loading = true
      this.startLoading()
      console.log("Data{}",this.date)

      if(this.date!==null&&this.date.length===2){
        this.form.startTime=this.date[0]
        this.form.endTime=this.date[1]
      }else{
        this.form.startTime=null
        this.form.endTime=null
      }
      console.log("Form:",this.form)
      axios.post("/operation_record/list/" + this.currentPage + "/" + this.size, this.form).then(res => {
        if (res.data.success) {
          this.recordList = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
          this.loading = false
          this.endLoading()
        }else{
          this.recordList=[]
          this.total = res.data.data.total
          this.pages = res.data.data.pages
          this.loading = false
          this.endLoading()

        }
      }).catch(error=>{

      })
    },
    getUserList() {
      this.loading = true
      axios.post("/operation_record/list/username",this.form).then(res => {
        if (res.data.success) {
          this.userNameList=res.data.data
        }
      }).catch(error=>{

      })
    }
  }
}
</script>

<style lang="less">
.operation {
  .select {
    //margin-top: 0.5rem;
    ////height: 40px;
    //border-bottom: 1px solid #ced4da;
    //margin-bottom: 1rem;
  }
  .main{
    height: 60vh!important;
    overflow-y: auto;
    .el-card__header {
        height: 75px!important;
    }
      .parent{
      position: relative!important;

      .child{
        position: absolute!important;
        top:0.5rem;
        right: 0.5rem;
      }
        .child1{
          position: fixed!important;
          top:0.5rem;
        }
    }
  }
}
</style>
